import tpl0 from './tpl/tpl0.tpl';
import tpl1 from './tpl/tpl1.tpl';
import tpl2 from './tpl/tpl2.tpl';
import tpl3 from './tpl/tpl3.tpl';
import wrapper from './tpl/wrapper.tpl';

import './index.scss';
import { getItemNode, tplReplace } from "../../libs/utils";

export default {
    name: 'NewList',
    // 设置NewList组件距离页面顶部的距离
    wrapperTpl(top) {
        // 拼接页面参数
        return tplReplace(wrapper, {
            top
        });
    },
    // 渲染组件
    tpl(options) {
        // 取出外部传入的数据和页码
        const { data, pageNum } = options;

        let list = '';
        let tpl = '';

        data.map((item, index) => {
            if (!item.thumbnail_pic_s) {
                // 如果该项没有图片，则渲染tpl0
                tpl = tpl0;
            } else if (item.thumbnail_pic_s && !item.thumbnail_pic_s02) {
                // 如果只有一张图片，则渲染tpl1
                tpl = tpl1;
            } else if (item.thumbnail_pic_s02 && !item.thumbnail_pic_s03) {
                // 如果有两张照片，则渲染tpl2
                tpl = tpl2;
            } else if (item.thumbnail_pic_s03) {
                // 如果有三张图片，则渲染tpl3
                tpl = tpl3;
            }
            
            // 拼接页面参数
            list += tplReplace(tpl, {
                pageNum,
                index,
                uniquekey: item.uniquekey,
                url: item.url,
                author: item.author_name,
                date: item.date,
                thumbnail_pic_s: item.thumbnail_pic_s,
                thumbnail_pic_s02: item.thumbnail_pic_s02,
                thumbnail_pic_s03: item.thumbnail_pic_s03,
                title: item.title,
                category: item.category
            })
        })
        // 返回拼接好的页面结构
        return list;
    },
    // 把延迟的图片显示
    imgShow () {
        const oImgs = document.querySelectorAll('img');
        [...oImgs].map(img => {
            img.onload = function () {
                img.style.opacity = "1";
            }
        })
    },
    // 绑定点击事件，并用回调函数setCurrentNews给外部来操作
    bindEvent (oList, setCurrentNews) {
        oList.addEventListener('click', this._goToDetail.bind(this, setCurrentNews), false);
    },
    // 内部方法，跳转到详情页
    _goToDetail (setCurrentNews) {
        // 通过工具getItemNode获取最外面的dom节点
        const oItem = getItemNode(arguments[1].target);
        const options = {
            idx: oItem.dataset.index,
            pageNum: oItem.dataset.page
        }
        // 传递点击项的index和页面，外部可以直接定位到该项
        setCurrentNews(options);
        // 跳转到详情页，并且把跳转前页面的路径传过去，方便返回回来
        window.location.href = `detail.html?path=${location.pathname}`;
    }
}